<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>首页</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/public.css" rel="stylesheet" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			/**
			 * 轮播图
			 */
			
			.mui-slider,
			.mui-slider img {
				min-height: 173px;
			}
			/**
			 * 九宫格
			 */
			
			.grid-box {
				padding: 10px 0;
				background: #FFFFFF;
			}
			
			.mui-col-xs-4 {
				width: 25%;
			}
			
			.mui-grid-view.mui-grid-9 {
				background: #FFFFFF;
				border: 0;
			}
			
			.mui-grid-view.mui-grid-9 .mui-table-view-cell {
				padding-top: 0;
				padding-bottom: 8px;
				border: 0;
			}
			
			.mui-grid-view.mui-grid-9 .mui-table-view-cell>a:not(.mui-btn) {
				padding-top: 3px;
				padding-bottom: 3px;
			}
			
			.grid-icon {
				display: inline-block;
				width: 38px;
				height: 38px;
				line-height: 38px;
				border-radius: 38px;
				font-size: 16px;
				font-weight: 500;
				color: #FFFFFF;
			}
			
			.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body {
				margin-top: 3px;
				font-size: 14px;
			}
			/**
			 * 推荐课程
			 */
			
			.pic-list {
				margin-top: 14px;
				background: #FFFFFF;
			}
			
			.pic-list h5 {
				display: inline-block;
				padding: 0 14px;
				font-size: 17px;
				margin-top: 14px;
				font-weight: bold;
				color: #3c4a55;
			}
			
			.mui-table-view:before {
				background: #FFFFFF;
			}
			
			.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-object {
				min-height: 95px;
			}
			/**
			 * 博文精选
			 */
			
			.mui-table-view .mui-media-object {
				line-height: 80px;
				max-width: 80px;
				height: 60px;
			}
			
			.mui-ellipsis {
				font-size: 16px;
				color: #333333;
			}
			
			.mui-ellipsis-font {
				font-size: 14px;
				color: #999;
				margin-top: 9px;
			}
		</style>
	</head>

	<body>

		<div class="mui-content" id="app">
			<!--
            	作者：2184291781@qq.com
            	时间：2019-03-16
            	描述：轮播图
            -->
			<div class="mui-slider">
				<div class="mui-slider-group mui-slider-loop">
					<!--支持循环，需要重复图片节点-->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#"><img src="https://edu-image.nosdn.127.net/0724E4971B2F87E45B5BFD6973EAC21B.jpg?imageView&crop=0_0_1242_573&quality=100&thumbnail=750y346&type=webp" /></a>
					</div>
					<div class="mui-slider-item">
						<a href="#"><img src="https://edu-image.nosdn.127.net/3f04177ce91e406fbd52a79a42f2d962.jpg?imageView&crop=0_0_1242_573&quality=100&thumbnail=750y346&type=webp" /></a>
					</div>
					<div class="mui-slider-item">
						<a href="#"><img src="https://edu-image.nosdn.127.net/028cbbf88cd1484cbb2b39363adbc958.jpg?imageView&crop=0_0_1242_573&quality=100&thumbnail=750y346&type=webp" /></a>
					</div>
					<div class="mui-slider-item">
						<a href="#"><img src="https://edu-image.nosdn.127.net/0724E4971B2F87E45B5BFD6973EAC21B.jpg?imageView&crop=0_0_1242_573&quality=100&thumbnail=750y346&type=webp" /></a>
					</div>
					<!--支持循环，需要重复图片节点-->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#"><img src="https://edu-image.nosdn.127.net/3f04177ce91e406fbd52a79a42f2d962.jpg?imageView&crop=0_0_1242_573&quality=100&thumbnail=750y346&type=webp" /></a>
					</div>
				</div>
			</div>
			<!--
            	作者：2184291781@qq.com
            	时间：2019-03-16
            	描述：九宫格
            -->
			<div class="grid-box">
				<ul class="mui-table-view mui-grid-view mui-grid-9">
					<li v-for="(item, index) in gridList" :key="index" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" >
						<a href="#" @tap="jumpUrl(item.path,item.param)">
							<span class="grid-icon" :style="{background: item.color}">{{item.name_m}}</span>
							<div class="mui-media-body" v-text="item.name_l"></div>
						</a>
					</li>
					
				</ul>
			</div>
			<!--
            	作者：2184291781@qq.com
            	时间：2019-03-16
            	描述：推荐课程
            -->
			<div class="pic-list">
				<h5>推荐课程</h5>
				<ul class="mui-table-view mui-grid-view">
					<li class="mui-table-view-cell mui-media mui-col-xs-6">
						<a href="#">
							<img class="mui-media-object" src="https://edu-image.nosdn.127.net/a12090ea-6978-4e7a-bb7c-f7294094ab94.png?imageView&quality=100&crop=0_0_879_495&thumbnail=336y190">
							<div class="mui-media-body">幸福就是可以一起睡觉</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-6">
						<a href="#">
							<img class="mui-media-object" src="https://edu-image.nosdn.127.net/a12090ea-6978-4e7a-bb7c-f7294094ab94.png?imageView&quality=100&crop=0_0_879_495&thumbnail=336y190">
							<div class="mui-media-body">想要一间这样的木屋，静静的喝咖啡</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-6">
						<a href="#"><img class="mui-media-object" src="https://edu-image.nosdn.127.net/a12090ea-6978-4e7a-bb7c-f7294094ab94.png?imageView&quality=100&crop=0_0_879_495&thumbnail=336y190">
							<div class="mui-media-body">Color of SIP CBD</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-6">
						<a href="#">
							<img class="mui-media-object" src="https://edu-image.nosdn.127.net/a12090ea-6978-4e7a-bb7c-f7294094ab94.png?imageView&quality=100&crop=0_0_879_495&thumbnail=336y190">
							<div class="mui-media-body">静静看这世界</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-6">
						<a href="#"><img class="mui-media-object" src="https://edu-image.nosdn.127.net/a12090ea-6978-4e7a-bb7c-f7294094ab94.png?imageView&quality=100&crop=0_0_879_495&thumbnail=336y190">
							<div class="mui-media-body">Color of SIP CBD</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-6">
						<a href="#">
							<img class="mui-media-object" src="https://edu-image.nosdn.127.net/a12090ea-6978-4e7a-bb7c-f7294094ab94.png?imageView&quality=100&crop=0_0_879_495&thumbnail=336y190">
							<div class="mui-media-body">静静看这世界</div>
						</a>
					</li>
				</ul>
			</div>
			<!--
            	作者：2184291781@qq.com
            	时间：2019-03-16
            	描述：专题
            -->
			<div class="pic-list">
				<h5>专题</h5>
				<ul class="mui-table-view mui-grid-view">
					<li class="mui-table-view-cell mui-media mui-col-xs-12">
						<a href="#">
							<img class="mui-media-object" src="//edu-image.nosdn.127.net/307e3bbd-0b8f-4166-a8ad-a694476020e8.png?imageView&quality=100&thumbnail=690y272">
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-12">
						<a href="#">
							<img class="mui-media-object" src="//edu-image.nosdn.127.net/307e3bbd-0b8f-4166-a8ad-a694476020e8.png?imageView&quality=100&thumbnail=690y272">
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-12">
						<a href="#">
							<img class="mui-media-object" src="//edu-image.nosdn.127.net/307e3bbd-0b8f-4166-a8ad-a694476020e8.png?imageView&quality=100&thumbnail=690y272">
						</a>
					</li>

				</ul>
			</div>
			<!--
            	作者：2184291781@qq.com
            	时间：2019-03-16
            	描述：最新课程
            -->
			<div class="pic-list">
				<h5>最新课程</h5>
				<ul class="mui-table-view mui-grid-view">
					<li class="mui-table-view-cell mui-media mui-col-xs-6">
						<a href="#">
							<img class="mui-media-object" src="https://edu-image.nosdn.127.net/a12090ea-6978-4e7a-bb7c-f7294094ab94.png?imageView&quality=100&crop=0_0_879_495&thumbnail=336y190">
							<div class="mui-media-body">幸福就是可以一起睡觉</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-6">
						<a href="#">
							<img class="mui-media-object" src="https://edu-image.nosdn.127.net/a12090ea-6978-4e7a-bb7c-f7294094ab94.png?imageView&quality=100&crop=0_0_879_495&thumbnail=336y190">
							<div class="mui-media-body">想要一间这样的木屋，静静的喝咖啡</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-6">
						<a href="#"><img class="mui-media-object" src="https://edu-image.nosdn.127.net/a12090ea-6978-4e7a-bb7c-f7294094ab94.png?imageView&quality=100&crop=0_0_879_495&thumbnail=336y190">
							<div class="mui-media-body">Color of SIP CBD</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-6">
						<a href="#">
							<img class="mui-media-object" src="https://edu-image.nosdn.127.net/a12090ea-6978-4e7a-bb7c-f7294094ab94.png?imageView&quality=100&crop=0_0_879_495&thumbnail=336y190">
							<div class="mui-media-body">静静看这世界</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-6">
						<a href="#"><img class="mui-media-object" src="https://edu-image.nosdn.127.net/a12090ea-6978-4e7a-bb7c-f7294094ab94.png?imageView&quality=100&crop=0_0_879_495&thumbnail=336y190">
							<div class="mui-media-body">Color of SIP CBD</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-6">
						<a href="#">
							<img class="mui-media-object" src="https://edu-image.nosdn.127.net/a12090ea-6978-4e7a-bb7c-f7294094ab94.png?imageView&quality=100&crop=0_0_879_495&thumbnail=336y190">
							<div class="mui-media-body">静静看这世界</div>
						</a>
					</li>
				</ul>
			</div>
			<!--
            	作者：2184291781@qq.com
            	时间：2019-03-16
            	描述：精选博文
            -->
			<div class="pic-list">
				<h5>精选博文</h5>
				<ul class="mui-table-view">
					<li class="mui-table-view-cell mui-media">
						<a href="javascript:;">
							<img class="mui-media-object mui-pull-left" src="../../img/shuijiao.jpg">
							<div class="mui-media-body">
								<p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
								<p class="mui-ellipsis mui-ellipsis-font">电子科技 &nbsp;550205阅读</p>
							</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media">
						<a href="javascript:;">
							<img class="mui-media-object mui-pull-left" src="../../img/shuijiao.jpg">
							<div class="mui-media-body">
								<p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
								<p class="mui-ellipsis mui-ellipsis-font">电子科技 &nbsp;550205阅读</p>
							</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media">
						<a href="javascript:;">
							<img class="mui-media-object mui-pull-left" src="../../img/shuijiao.jpg">
							<div class="mui-media-body">
								<p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
								<p class="mui-ellipsis mui-ellipsis-font">电子科技 &nbsp;550205阅读</p>
							</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media">
						<a href="javascript:;">
							<img class="mui-media-object mui-pull-left" src="../../img/shuijiao.jpg">
							<div class="mui-media-body">
								<p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
								<p class="mui-ellipsis mui-ellipsis-font">电子科技 &nbsp;550205阅读</p>
							</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media">
						<a href="javascript:;">
							<img class="mui-media-object mui-pull-left" src="../../img/shuijiao.jpg">
							<div class="mui-media-body">
								<p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
								<p class="mui-ellipsis mui-ellipsis-font">电子科技 &nbsp;550205阅读</p>
							</div>
						</a>
					</li>
				</ul>
			</div>
			<!--
            	作者：2184291781@qq.com
            	时间：2019-03-16
            	描述：立即咨询
            -->
			<div class="chat-btn-box">
				<div class="chat-btn">
					<img src="../../img/tel.png" />
					<button type="button" class="mui-btn">立即咨询</button>
				</div>

			</div>
		</div>
		<!--引入公用脚本文件开始-->
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/public.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/tools.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<!--引入公用脚本文件结束-->

		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data: {
					gridList: [
						{name_m:'前',name_l:'前端教程',path:'typelist.html',param:'前端教程',color:'#FA7155'},
						{name_m:'后',name_l:'后端教程',path:'typelist.html',param:'后端教程',color:'#68DAF4'},
						{name_m:'产',name_l:'产品运营',path:'typelist.html',param:'产品运营',color:'#2C96E7'},
						{name_m:'设',name_l:'设计创意',path:'typelist.html',param:'设计创意',color:'#2FC6B0'},
						{name_m:'系',name_l:'系统运维',path:'typelist.html',param:'系统运维',color:'#BFA7F3'},
						{name_m:'电',name_l:'技术博文',path:'',param:'',color:'#9FD36B'},
						{name_m:'办',name_l:'社交分享',path:'',param:'',color:'#F2E026'},
						{name_m:'搜',name_l:'搜索',path:'',color:'#CF2D28'}
					]
				},
				created: function() { //html渲染完成前
					var vm = this;

				},
				mounted: function() { //html渲染完成后
					var vm = this;
					//mui初始化
					(function($) {
						//获得slider插件对象
						var gallery = mui('.mui-slider');
						gallery.slider({
							interval: 1000, //自动轮播周期，若为0则不自动播放，默认为0；
						});

					})(mui);
				},
				methods:{
					jumpUrl:function(path,param){
						tools.openPage(path+"?param="+param,path);
					}
				}
			});
		</script>
	</body>

</html>